import React, {Component} from 'react';

class Qr2 extends Component {
  constructor (props) {
    super(props);
    this.state = {
      qrShow: false
    };
  }
  componentDidMount () {
    document.body.addEventListener('click', e => {
      console.log(e.target);
      if (e.target && e.target.matches('.qr-img')) return;
      // if (e.target.contains('qr')) {
      //   console.log('true');
      // }
      this.setState({qrShow: false});
    }, false);
    // document.querySelector('.qr').addEventListener('click', e => {
    //   e.stopPropagation();
    // }, false);
  }
  componentWillUnmount () {
    document.body.removeEventListener('click');
    // document.querySelector('.qr').removeEventListener('click');
  }
  showQr (e) {
    console.log('我被点击了', this.state.qrShow);
    this.setState({qrShow: !this.state.qrShow});
    e.stopPropagation();
  }
  render () {
    return (
      <div>
        <h3>原生事件与react合成事件</h3>
        <button onClick={this.showQr.bind(this)}>显示二维码</button>
        <div className="qr" style={{'display': this.state.qrShow ? 'block' : 'none'}}>
          <img className="qr-img" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4191268984,3209557915&fm=26&gp=0.jpg" alt="" width="200"/>
        </div>
      </div>
    )
  }
}

export default Qr2;
